<template>
	<view class="content">
		<view class="search-container">
			<!-- 搜索框 -->
			<view class="search-box">
				<up-search placeholder="请输入关键字" v-model="searchKeyword" :showAction="false" shape="square"
					:input-style="{ fontSize: '28rpx' }" :clearable="true"
					@search="debounceSearch(searchKeyword)"></up-search>
			</view>

			<!-- 搜索结果 -->
			<transition name="fade">
				<view v-if="isLoading" class="search-results">
					<view v-for="(item,index) in data.searchList" :key="index" class="result-item"
						@click="skipDetail(item.id,item.title)">
						<text class="result-text">{{ item.title }}</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>

					<!-- 空状态 -->
					<view v-if="data.searchList.length === 0" class="empty-tips">
						<uni-icons type="search" size="24" color="#ccc" />
						<text>没有找到相关结果</text>
					</view>
				</view>
			</transition>

			<!-- 错误提示 -->
			<view v-if="error" class="error-message">
				<uni-icons type="info" size="18" color="#fff" />
				<text>{{ error }}</text>
			</view>
		</view>
		<up-divider text="精选文章"></up-divider>
		<view class="jx_list">
			<view v-for="article in data.articleList" :key="article.id" class="article-item"
				@click="skipDetail(article.id,article.title)" v-if="data.articleList.length">
				<image class="article-image" :src="article.image" mode="aspectFill" />
				<view class="article-content">
					<text class="article-title">{{ article.title }}</text>
					<text class="article-desc">{{ article.description }}</text>
					<view class="article-meta">
						<text class="meta-item">{{ formatDate(article.createdAt) }}</text>
						<view class="meta-right">
							<view class="meta-icon">
								<uni-icons type="hand-up" size="14" color="#666"></uni-icons>
								<text>{{ article.likesCount }}</text>
							</view>
							<view class="meta-icon">
								<uni-icons type="eye" size="14" color="#666"></uni-icons>
								<text>{{ article.SeesCount }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-if="data.empty">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getArticles
	} from '../../api/api.js'
	import {
		reactive,
		ref,
		watch,
		onUnmounted
	} from 'vue'
	// ---------------------------------------------------------------
	const data = reactive({
		empty: false,
		articleList: [],
		currentPage: 1,
		searchList: []
	})
	// 响应式搜索关键词
	const searchKeyword = ref('');

	// 加载状态
	const isLoading = ref(false);

	// 错误信息
	const error = ref(null);

	// 防抖定时器
	let debounceTimer = null;

	// 实际搜索函数
	const performSearch = async (keyword) => {
		console.log(keyword);
		await getArticles({
			title: keyword,
			pageSize: 13
		}).then(res => {
			isLoading.value = true
			data.searchList = res.articles
			console.log(res);
		})
	};

	// 防抖处理函数
	const debounceSearch = (keyword) => {
		// 清除之前的定时器
		clearTimeout(debounceTimer);

		// 设置新的定时器
		debounceTimer = setTimeout(() => {
			// 执行前进行有效性检查
			if (keyword.trim().length > 0) {
				performSearch(keyword.trim());
			} else {
				isLoading.value = false
			}
		}, 500); // 500ms 防抖延迟
	};

	// 监听搜索关键词变化
	watch(searchKeyword, (newVal) => {
		// 触发防抖搜索
		debounceSearch(newVal);
	});


	// 组件卸载时清理
	onUnmounted(() => {

	});
	const formatDate = (dateStr) => {
		// 实现日期格式化逻辑
		return dateStr.split('日')[0].replace('年', '-').replace('月', '-');
	}
	// 跳转详情页
	const skipDetail = (id, title) => {
		isLoading.value = false
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}&title=${title}`
		})
		searchKeyword.value = ''
	}
	// 获取文章列表数据
	const Articles = async () => {
		await getArticles({
			currentPage: data.currentPage,
			pageSize: 20
		}).then(res => {
			if (!res.articles.length) {
				data.empty = true
				return
			}
			data.articleList = res.articles
		})
	}
	// 页面滑动到底部加载数据
	onReachBottom(() => {
		if (!data.empty) {
			data.currentPage++
			Articles()
		}
	})
	// 页面一加载数据
	onShow(() => {
		Articles()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;

		// 搜索容器
		.search-container {
			position: relative;
			padding: 20rpx 30rpx;
			background: #fff;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

			.search-box {
				position: relative;
				z-index: 2;

				/* 修改uview搜索框默认样式 */
				:deep(.u-search__content) {
					border-radius: 12rpx !important;
					background: #f5f5f5 !important;
				}
			}

			// 搜索结果
			.search-results {
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				right: 30rpx;
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
				z-index: 999;
				max-height: 60vh;
				overflow-y: auto;

				.result-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 30rpx;
					border-bottom: 1rpx solid #eee;
					transition: all 0.3s;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background: #f8f8f8;
					}

					.result-text {
						font-size: 28rpx;
						color: #333;
						text-overflow: ellipsis;
						flex: 1;
						margin-right: 20rpx;
					}
				}

				.empty-tips {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40rpx;
					color: #999;
					font-size: 26rpx;

					text {
						margin-left: 12rpx;
					}
				}
			}

			// 错误提示
			.error-message {
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				right: 30rpx;
				background: #ff4d4f;
				color: #fff;
				padding: 20rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				animation: shake 0.4s;

				text {
					margin-left: 10rpx;
				}
			}
		}

		// 动画效果
		@keyframes shake {
			0% {
				transform: translateX(4rpx);
			}

			20% {
				transform: translateX(-4rpx);
			}

			40% {
				transform: translateX(4rpx);
			}

			60% {
				transform: translateX(-4rpx);
			}

			80% {
				transform: translateX(4rpx);
			}

			100% {
				transform: translateX(0);
			}
		}

		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 0.3s;
		}

		.fade-enter-from,
		.fade-leave-to {
			opacity: 0;
		}

		.jx_list {

			.article-item {
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 30rpx;
				display: flex;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}

				.article-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 12rpx;
					margin-right: 30rpx;
					flex-shrink: 0;
				}

				.article-content {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.article-title {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.article-desc {
						font-size: 26rpx;
						color: #999;
						margin: 15rpx 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.article-meta {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.meta-item {
							font-size: 24rpx;
							color: #999;
						}

						.meta-right {
							display: flex;
							align-items: center;

							.meta-icon {
								display: flex;
								align-items: center;
								margin-left: 30rpx;

								text {
									font-size: 24rpx;
									color: #666;
									margin-left: 8rpx;
								}
							}
						}
					}
				}
			}


			.empty {
				width: 100%;
				height: auto;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>